<template>
	<view class="content">
		<nav-bar isHome titleText='首页' />
		<view class="home-layout">
			<view class="notice">
				<u-notice-bar fontSize="30" text="公告内容" mode="closable" />
			</view>
			<view class="contact">
				<u-button text="咨询"></u-button>
			</view>
			<view class="swiper-content">
				 <u-swiper
				 circular
				 height="350"
				 radius="10"
				            :list="sliderList"
				    ></u-swiper>
			</view>
			<view class="nav2-list">
				<block v-for="(item,index) in nav2sList" :key="index">
					<view class="nav2-item" @tap="onNav2Tap(item)" :data-index="index">
							<image :src="item.pic_image_url" mode="aspectFit"></image>
						</view>
				</block>
			</view>
			<view class="nav-list">
				<block v-for="(item,index) in navsList" :key="index">
					<view class="nav-item" @tap="onNavsTap(item)">
						<image :src="item.pic_image_url" mode="aspectFit"></image>
						<text class="text">{{ item.title }}</text>
					</view>
				</block>
			</view>
			
			<view class="hospital-container">
				<hospital-item @tap="handleToHospitaldetail(item)" :itemInfo="item" v-for="item in hospitalList" :key="item.id" />
			</view>
		</view>
	</view>
</template>

<script setup>
import colorGradient from '../../uni_modules/uview-plus/libs/function/colorGradient';
	// 轮播图数据
	const sliderList = ref([])
	// 快捷入口2
	const nav2sList = ref([])
	// 多个快捷入口
	const navsList = ref([])
	// 医院数据
	const hospitalList = ref([])
	let app = getApp()
	onLoad(() => {
		app.globalData.Utils.getUserInfo()
		app.globalData.Utils.request({
			url: '/app/init',
			success: result => {
				let { id } = result.data.area
				app.globalData.Utils.request({
					url: '/index/index',
					data: {
						aid: id,
					},
					success: ({ data }) => {
						let { slides,nav2s,navs,hospitals } = data
						sliderList.value =  slides.map(item => item.pic_image_url)
						nav2sList.value =  nav2s
						navsList.value = navs
						hospitalList.value = hospitals
					}
				})
			}
		})
	})
    const onNav2Tap = (nav2Info) => {
		// 判断是不是内部链接
		if(nav2Info.stype === '1') {
			uni.navigateTo({
				url: nav2Info.stype_link
			})
		}
	}
	const onNavsTap = (navsInfo) => {
		let { stype, stype_link} = navsInfo
		// 判断是不是内部链接
		if(stype === '1') {
			uni.navigateTo({
				url: stype_link
			})
		}
	}
    // 跳转到医院详情
	const handleToHospitaldetail = (item) => {
		uni.navigateTo({
			url: '/pages/hospital/index?hid=' + item.id
		})
	}
</script>

<style lang="scss">
	.home-layout {
		margin-top: 150rpx;
		padding: 20rpx;
		:deep() {
			.u-icon__icon {
				font-size: 40rpx !important;
			}
		}
		.contact {
			height: 100rpx;
			width: 100%;
			margin: 20rpx 0;
		}
		.swiper-content {
			// height: 160rpx;
			width: 100%;
			:deep() {
				.u-swiper {
					height: 100% !important;
				}
			}
		}
		.nav2-list {
			margin: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			column-gap: 40rpx;
			justify-content: space-around;
			.nav2-item {
				height: 200rpx;
				image {
					width: 100%;
				    height: 100%;
					border-radius: 20rpx;
				}
			}
		}
		.nav-list {
			margin: 20rpx 0;
			display: grid;
			grid-template-columns: repeat(5,1fr);
			column-gap: 20rpx;
			justify-content: space-around;
			.nav-item {
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 80%;
				    height: 80%;
					border-radius: 20rpx;
				}
				.text {
					color: #000;
					font-size: 28rpx;
					text-align: center;
					font-weight: bold;
				}
			}
		}
		.hospital-container {
			margin: 20rpx 0;
		}
	}
</style>
